<template>
  <v-chart class="chart" ref="chart" :style="`height:${height}px`" />
</template>
  
  <script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkPointComponent,
} from "echarts/components";
import VChart from "vue-echarts";
console.log('MarkPoint', MarkPointComponent)
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkPointComponent
]);

export default {
  name: "chart",
  components: {
    VChart,
  },
  props: {
    option: Object,
    default: {},
    height: {
      type: [Number, String],
      default: 400,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.option && this.$refs.chart?.setOption(this.option);
  },
  watch: {
    option: {
      handler() {
        this.option && this.$refs.chart?.setOption(this.option);
      },
    },
  },
};
</script>
  
<style scoped>
.chart {
}
</style>